<script setup>
import { ref, onMounted } from 'vue'
import { formatTime } from '@/utils/format.js'
import { Delete, Edit, Close, Check } from '@element-plus/icons-vue'
import ScenicSpotEdit from './components/ScenicSpotEdit.vue'
import {
  ScenicSpotSearchService,
  ScenicDelService,
  AuditScenicSpotsService
} from '@/api/scenicSpots'
import { useUserStore } from '@/stores/modules/user'
const userStore = useUserStore()
const role = userStore.userRole
const SpotsList = ref([])
const loading = ref(false)
const defaultModel = ref({
  scenicAreaId: null,
  scenicSpotName: '',
  scenicSpotInfo: '',
  scenicSpotImages: [],
  id: null,
  pageNum: 1,
  pageSize: 10,
  createScenicSpotUserAccount: '',
  scenicSpotStatus: ''
})
const params = ref({
  scenicAreaId: null,
  scenicSpotName: '',
  scenicSpotInfo: '',
  scenicSpotImages: [],
  id: null,
  pageNum: 1,
  pageSize: 10,
  createScenicSpotUserAccount: '',
  scenicSpotStatus: ''
})
const total = ref(0)

//数据渲染
const getSpotList = async () => {
  const res = await ScenicSpotSearchService(params.value)
  console.log(res.data.data.records)
  SpotsList.value = res.data.data.records
  total.value = res.data.data.total
}

// 删除
const onDel = async (row) => {
  let ids = row.id
  console.log('Delete article', ids)
  const params = new URLSearchParams()

  params.append('ids', JSON.stringify(ids))

  await ElMessageBox.confirm('是否要删除', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  const res = await ScenicDelService(params)
  console.log(res)
  ElMessage.success('删除成功')
  getSpotList()
}
//搜索
const onSearch = async () => {
  console.log('搜索', params.value)
  try {
    loading.value = true
    params.value.pageNum = 1 //做分页操作
    const res = await ScenicSpotSearchService({ ...params.value })
    if (res && res.data && res.data.data && res.data.data.records)
      SpotsList.value = res.data.data.records
    else SpotsList.value = []
  } catch (error) {
    console.log('搜索失败', error)
  } finally {
    loading.value = false
  }
}
// 重置
const onReset = () => {
  params.value = { ...defaultModel.value }
  params.value.pageNum = 1 // 重置页面
  getSpotList()
}
const ScenicSpotEditRef = ref()
//添加
const onAdd = () => {
  console.log('添加')
  ScenicSpotEditRef.value.open({})
}
const onEdit = (row) => {
  console.log('编辑', row)
  // ScenicSpotEditRef.value.open(row.id)
  ScenicSpotEditRef.value.open(row)
}
const onSuccess = () => {
  const lastPage = Math.ceil((total.value + 1) / params.value.pageSize)
  // 更新成最大页码数，再渲染
  params.value.pageNum = lastPage
  getSpotList()
}

// 处理分页
const onSizeChange = (size) => {
  params.value.pageNum = 1
  params.value.pageSize = size
  // 基于最新的当前页 和 每页条数，渲染数据
  getSpotList()
}
const onCurrentChange = (page) => {
  // 更新当前页
  params.value.pageNum = page
  // 基于最新的当前页，渲染数据
  getSpotList()
}

// 审核
const OnAudit = async (row) => {
  console.log(row)
  let id = row.id
  const params = new URLSearchParams()
  params.append('id', id)
  console.log(params)
  const res = await AuditScenicSpotsService(params)
  // console.log('res', res)
  if (res.data.code == 200) {
    ElMessage.success('审核成功')
    getSpotList()
  } else {
    ElMessage.error('审核失败')
  }
}
onMounted(getSpotList)
</script>
<template>
  <page-container title="景点管理">
    <template #extra>
      <el-button type="primary" @click="onAdd">发布景点</el-button>
    </template>

    <el-form inline>
      <el-form-item label="景点名称:">
        <el-input
          v-model="params.scenicSpotName"
          placeholder="输入景点名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="审核状态" style="width: 200px">
        <el-select
          v-model="params.scenicSpotStatus"
          placeholder="请选择审核状态"
          clearable
        >
          <el-option label="未审核" value="0"></el-option>
          <el-option label="已审核" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="onSearch" type="primary">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="SpotsList" style="width: 100%" v-loading="loading">
      <el-table-column
        label="序号"
        width="100"
        type="index"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="景点名称"
        prop="scenicSpotName"
        width="256px"
        header-align="center"
        align="center"
      ></el-table-column>

      <el-table-column
        class="scenicSpotInfo"
        label="景点介绍"
        prop="scenicSpotInfo"
        width="260px"
        header-align="center"
        align="center"
      >
        <!-- 添加超出的框 -->
        <template #default="{ row }">
          <el-tooltip effect="light" placement="top">
            <template #content>
              <div class="tooltip-content">{{ row.scenicSpotInfo }}</div>
            </template>
            <div class="ellipsis-tooltip" :style="{ maxWidth: '300px' }">
              {{ row.scenicSpotInfo }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
        label="创建人"
        width="240px"
        prop="createScenicSpotUserAccount"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        width="260"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          {{ formatTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column
        label="审核状态"
        prop="scenicSpotStatus"
        width="240px"
        header-align="center"
        align="center"
      >
      </el-table-column>

      <el-table-column
        label="操作"
        width="260"
        header-align="center"
        align="center"
      >
        <!-- 作用域插槽 -->
        <template #default="{ row, $index }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEdit(row)"
          ></el-button>

          <el-button
            type="primary"
            :icon="Close"
            circle
            plain
            v-if="row.scenicSpotStatus == 0 && role === 1"
            @click="OnAudit(row, $index)"
          ></el-button>
          <el-button
            type="primary"
            v-if="row.scenicSpotStatus == 1 && role === 1"
            :icon="Check"
            circle
          ></el-button>

          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDel(row, $index)"
          ></el-button>
        </template>
      </el-table-column>

      <!--  可以定制empty插槽 -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      :page-sizes="[2, 3, 5, 10]"
      :background="true"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

    <scenicSpot-edit
      ref="ScenicSpotEditRef"
      @success="onSuccess"
    ></scenicSpot-edit>
  </page-container>
</template>

<style lang="css">
.ellipsis-tooltip {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 设置显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  cursor: pointer;
}
.tooltip-content {
  max-width: 300px; /* 工具提示的最大宽度 */
  white-space: normal;
  word-break: break-all;
}
</style>

<style lang="scss" scoped></style>
